<template>
  <div class="container">
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
      </el-form-item>

      <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="一级分类"
          @change="subjectLevelOneChanged"
        >
          <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>

      <!-- 课程讲师 TODO -->
      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseInfo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>

      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>

      <!-- 课程封面-->
      <el-form-item label="课程封面">

        <el-upload
          class="avatar-uploader"
          :action="BASE_API+'/eduOss/fileOss/uploadFile'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="courseInfo.cover" :src="courseInfo.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" :loading="isLoading" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import course from "@/api/edu/course";
  import subject from "@/api/edu/subject";
  import teacher from "@/api/edu/teacher";
  import Tinymce from '@/components/Tinymce';

  export default {
    components: {
      Tinymce,
    },
    name: "info",
    data() {
      return {
        saveBtnDisabled: false,
        isLoading: false,
        courseId: "",
        courseInfo: {
          title: "",
          subjectId: "", //二级分类id
          subjectParentId: "", //一级分类id
          teacherId: "",
          lessonNum: 0,
          description: "",
          cover: "",
          price: 0
        },
        BASE_API: process.env.BASE_API, // 接口API地址
        teacherList: [], //封装所有的讲师
        subjectOneList: [], //一级分类
        subjectTwoList: [] //二级分类
      };
    },
    created() {
      this.init()
    },
    watch: {
      $route(to, from) {
        this.init();
      }
    },
    methods: {
      // 初始化数据
      init() {
        if (this.$route.params && this.$route.params.id) {
          this.courseId = this.$route.params.id;
          this.getCourseInfo();
        } else {
          this.courseInfo = {
            title: "",
            subjectId: "", //二级分类id
            subjectParentId: "", //一级分类id
            teacherId: "",
            lessonNum: 0,
            description: "",
            cover: "",
            price: 0
          }
          // 初始化所有讲师
          this.getTeacherList();
          // 初始化一级分类
          this.getOneSubjectList();
        }
      },

      // 根据id查询课程信息
      getCourseInfo() {
        course.getCourseInfoId(this.courseId).then(res => {
          this.courseInfo = res.data.courseInfo
          subject.getAllSubjectList().then(res => {
            // 获取所有一级分类
            this.subjectOneList = res.data.items
            // 把一级分类进行遍历
            for(let i=0; i<this.subjectOneList.length; i++) {
              let oneSubject = this.subjectOneList[i];
              // 比较当前courseInfo中的subjectParent和循环中的id是否相同
              if(this.courseInfo.subjectParentId == oneSubject.id) {
                // 获取二级分类的列表
                this.subjectTwoList = oneSubject.children;
              }
            }
          })
          // 初始化所有讲师
          this.getTeacherList();
        })
      },
      //上传封面成功调用的方法
      handleAvatarSuccess(res, file) {
        this.courseInfo.cover = res.data.url;
      },
      //上传之前调用的方法
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },

      subjectLevelOneChanged(value) {
        //value就是一级分类id值
        //遍历所有的分类，包含一级和二级
        for (let i = 0; i < this.subjectOneList.length; i++) {
          //每个一级分类
          let oneSubject = this.subjectOneList[i];
          //判断：所有一级分类id 和 点击一级分类id是否一样
          if (value === oneSubject.id) {
            //从一级分类获取里面所有的二级分类
            this.subjectTwoList = oneSubject.children;
            //把二级分类id值清空
            this.courseInfo.subjectId = "";
          }
        }
      },
      getOneSubjectList() {
        // 获取所有一级分类
        subject.getAllSubjectList().then(res => {
          this.subjectOneList = res.data.items;
        });
      },

      getTeacherList() {
        // 获取讲师列表
        teacher.getTeacherList().then(res => {
          this.teacherList = res.data.items;
        });
      },
      // 添加课程
      saveCourse() {
        course.addCourseInfo(this.courseInfo).then(res => {
          this.isLoading = false
          if (res.code == 20000) {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            //跳转到第二步
            this.$router.push({
              path: "/course/chapter/" + res.data.courseId
            });

          } else {
            this.$message.error("添加失败!");
          }
        }).catch(error => {
            console.log(error)
        });
      },

      // 修改课程
      updateCourse() {
        course.updateCourseInfo(this.courseInfo).then(res => {
          this.isLoading = false
          //提示
          this.$message({
            type: "success",
            message: "修改课程信息成功!"
          });
          //跳转到第二步
          this.$router.push({
            path: "/course/chapter/" + this.courseId
          });
        });
      },
      saveOrUpdate() {
        this.isLoading = true
        if (this.courseId) {
          // 修改
          this.updateCourse();
        } else {
          this.saveCourse();
        }
      }
    },



  }
</script>

<style>
  .container{
    margin: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
